<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="tipswindown.js" type="text/javascript"></script>

<link href="tipswindown.css" rel="stylesheet" type="text/css" />
	
	
	
<style type="text/css">

/* maojd */

.windown-hb{
	background:url('img/body_bg.jpg') repeat-x left bottom #e5e5e5;
	width:460px;
	
	border: 0px solid rgba(33, 33, 33, 0.6);
	
	-moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
	-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
	box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}

.windown-hb .button{
	display:inline-block;
	background:url('img/buttons.png') no-repeat;
	color:black;
	position:relative;
	height: 33px;
	
	font:17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	
	margin-right: 15px;
	padding: 0 35px 0 40px;
	text-decoration:none;
	border:none;
}
.confirmButtons{
	padding:15px 0 25px;
	text-align:center;
}

.windown-hb .button span{
	position:absolute;
	top:0;
	right:-5px;
	background:url('img/buttons.png') no-repeat;
	width:5px;
	height:33px
}
.windown-hb .blue{				background-position:left top;text-shadow:1px 1px 0 #5889a2;}
.windown-hb .blue span{			background-position:-195px 0;}
.windown-hb .blue:hover{		background-position:left bottom;}
.windown-hb .blue:hover span{	background-position:-195px bottom;}


.windown-hb .gray{				background-position:-200px top;text-shadow:1px 1px 0 #707070;}
.windown-hb .gray span{			background-position:-395px 0;}
.windown-hb .gray:hover{		background-position:-200px bottom;}
.windown-hb .gray:hover span{	background-position:-395px bottom;}

/* 
1、一定要是class样式类型
2、一定要以windown-开头
3、CSS样式的字符串一定要和tipsWindown()函数的最后一个参数对应，例如：
.windown-hb  和 tipsWindown("标题","id:confirmBox","250","150","false","","true","hb");
满足以上三个条件，就能够移植CSS样式 


原因分析:（把一个div显示到弹出层中，css失效。.windown-hb本来是#confirmBox）
1.tipswindown.js中，是通过id获取div，所以要 显示出来的div肯定有一个id.		
			比如：<div id="confirmBox" class="windown-hb" style="dispaly:none">		xxx各种东西div span的等等好多
			
2.弹出来以后：原来的div变成 	<div id="windown-content" class="windown-" style="width: 300px; height: 150px;">xxx各种东西div span的等等好多</div>
		发现一个严重的问题 原来需要用的confirmBox这个div只是里面的内容复制过去了，但是本身的属性包括id并没有复制过去   ，所以用到id的地方，必然失效。
		
3.解决方法一：
	想到用class加样式
		class="windown-参数"		参数：tipsWindown()函数的最后一个参数。
		所以，只要css样式命名  按照规则来，就可以生效。即：class="windown-参数"
	解决方法二：
		在需要弹出的div外部再加一个div,即：把这个大的div里面的东西全部复制过去（复制到弹出层，id="confirmBox"的div也复制了过去。所以css不会失效）

*/
</style>	
	
<script type="text/javascript">
	
	 $(document).ready(function(){
		 
		 //弹出文本
		 $("#text1").click(function() {
				tipsWindown("标题","text:提示信息内容","250","150","true","","true","text")
			});
		 
		 //不能拖动的文本，不覆盖 背景
		 $("#text2").click(function() {
				tipsWindown("标题","text:我不能拖动，而且还没遮罩背景","250","150","false","","false","text")
			});
		 //三秒消息文本
			$("#text3").click(function() {
				tipsWindown("标题","text:我不能拖动，但3秒钟后我会自动消失","250","150","false","3000","true","text")
			});
		 
			//弹出确认窗口
			$("#text4").click(function() {
				
				tipsWindown("确认信息","id:confirmBox","500","180","false","","true","hb");
			});
		 
		 //弹出div
		 $("#btnSetType").click(
					function() {
						tipsWindown("标题", "id:showDiv", "350", "150", "true", "","true", "id")
					});
		 //弹出图片
		 $("#img1").click(function() {
				tipsWindown("图片","img:image/tipsImage.gif","500","230","true","","true","img")
			});
		 
		 
		 //弹出一个html
		 $("#url1").click(function(){
				tipsWindown("标题","url:get?index.html","250","150","true","","true","text");
			});
		 
		 $("#iframe1").click(function(){
				//tipsWindown("机构导入","url:get?test.html","250","150","true","","true","text");
				tipsWindown("机构导入","iframe:http://localhost:8080/myweb/tipswinservlet","500","400","true","","true","tipswinservlet");
				$("body").bind("mousedown", onBodyDown);	//	为body元素的 鼠标点击  绑定onBodyDown处理函数。
				
			});
		 
		 
	 });
	
	 function onBodyDown(){
		 //alert(1345);
		  hideMenu();
		
	 }
	 function hideMenu(){
		 $("#windownbg").remove();
		 $("#windown-box").fadeOut("fast",function(){$(this).remove();});
		 $("body").unbind("mousedown", onBodyDown);	//unbind 从每一个匹配的元素中删除绑定的事件
	 }
	
</script>


</head>

<body>
	弹出文本信息提示：
	 <br />
	tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")
	<br>
	<input id="text1" type="button" value="弹出一个提示信息">
	
	<br>
	<br>

	弹出一个div： 
	<br />
	tipsWindown("标题","id:showDiv","300","200","true","","true","id")
	<br>
	<input id="btnSetType" type="button" value="点击我出一个div窗口" >
					<div id="showDiv" style="display:none">
						我是弹出层内容！
					</div>
					
					
	<br>
	<br>
	弹出图片： <br />
	tipsWindown("图片","img:图片路径","250","150","true","","true","img")
	<br>
	<input id="img1" type="button" value="点击弹出图片">
	
	<br><br>
	get加载一个.html文件（也可以是.php/.asp?id=4之类的）： <br />
	tipsWindown("标题","url:get?index.html","250","150","true","","true","text");
	<br>
	<input id="url1" type="button" value="加载一个html文件">
	
	
	<br><br>
		<br>
		tipsWindown("机构导入","iframe:http://localhost:8080/myweb/tipswinservlet","500","400","true","","true","tipswinservlet");
		<br>
		<button id="iframe1">请求servlet显示页面</button>
	<br>	
	<a href="http://localhost:8080/myweb/tipswinservlet">点击请求tipswinservlet</a>	
		
		
		
		
	<Br><br>
	弹出一个不能拖动且没有遮罩背景的文本信息层： <br />
	tipsWindown("标题","text:我不能拖动，而且还没遮罩背景","250","150","false","","false","text")
	<br>
	<input id="text2" type="button" value="不挡住背景 文本">
		
	<br><br>
	三秒后自动消失的文本
	<br>
	tipsWindown("标题","text:我不能拖动，但3秒钟后我会自动消失","250","150","false","3000","true","text")
	<br>
	<input id="text3" type="button" value="三秒消息的文本">	
	
	<br><br>
	三秒后自动消失的文本
	<br>
	tipsWindown("标题","text:我不能拖动，但3秒钟后我会自动消失","250","150","false","3000","true","text")
	<br>
	<input id="text4" type="button" value="弹出确认窗口">	
	
	
	<br><br>
	<font color="red">说明：</font>
	tipsWindown(title,content,width,height,drag,time,showbg,cssName)共九个参数
	<ul>
		<li>title 窗口的标题 </li>
		<li>content 内容类型		 	
			<ul>
				<li>text:文本内容</li>
				<li>id:div 等 要显示的 id</li>
				<li>img:图片路径</li>
				<li>url:get? html地址/或者url地址	.不能是直接jsp路径   但是可以是 servlet返回重定向的jsp</li>
				<li>iframe:url地址       </li>
			</ul>
		</li>
			
		<li>width 窗口的宽度 </li>
		<li>height 窗口的高度 </li>
		<li>drag 是否可以拖动	true可以拖动， false 不能拖动 </li>
		<li>time 自动消失的时间	ms为单位 </li>
		<li>showbg 是否覆盖背景	true 覆盖，false不覆盖 </li>
		<li>cssName  </li>
		
	</ul>
	
	
	<div id="treeButton" style="text-align: center; margin-top: 5px; margin-bottom: 5px">
         <a href="#" onclick="putTreeName()">
                                                    确定
         </a>
         <a href="#" onclick="cacleMenu()">
                                                    取消
         </a>
    </div>
    
    
    
    
    <div id="confirmBox" class="windown-hb" style="dispaly:none">
		<h1>Delete Confirmationaa</h1>
		<!-- <p>
			You are about to delete this item. <br>It cannot be restored at
			a later time! Continue?
		</p> -->
		<div class="confirmButtons">
			<a href="#" class="button blue">Yes<span></span></a>
			<a href="#" class="button gray">No<span></span></a>
		</div>
	</div>
    
    
</body>
</html>
